<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.0.0.min.js"></script>
		<style type="text/css">
			#div001 {
				border: 10px solid #FF0000;
				border-radius: 15%;
				position: fixed;
				top: 300px;
				width: 600px;
				height: 400px;
				left: 100px;
				z-index: 10;
				background-color: #00FFFF;
				box-shadow: 10px 10px 5px #888888;
				/*transition: all 1s;*/
			}
			
			#div002 {
				border: 10px solid #FF0000;
				border-radius: 15%;
				position: fixed;
				top: 200px;
				width: 800px;
				height: 600px;
				left: 350px;
				z-index: 20;
				background-color: #1B6D85;
				box-shadow: 10px 10px 5px #888888;
				/*transition: all 1s;*/
			}
			
			#div003 {
				border: 10px solid #FF0000;
				border-radius: 15%;
				position: fixed;
				top: 300px;
				width: 600px;
				height: 400px;
				left: 800px;
				z-index: 15;
				background-color: #B2DBA1;
				box-shadow: 10px 10px 5px #888888;
				/*transition: all 1s;*/
			}
		</style>
	</head>

	<body>
		<div id="div001">001</div>
		<div id="div002">002</div>
		<div id="div003">003</div>
	</body>

</html>
<script>
	var left, center, right;
	window.onload = function() {
		left = document.getElementById("div001");
		center = document.getElementById("div002");
		right = document.getElementById("div003");
		right.addEventListener("click", rightaa);
	}

	function rightaa() {
		right.removeEventListener("click", rightaa);
		//右到中
		$(right).animate({
			top: '200px',
			zIndex: '20',
			width:'800px',
			height:'600px',
			left: '350px'
		});
		//左到右
		$(left).animate({
			left: '800px',
			zIndex: '15'
		});
		//中到左
		$(center).animate({
			zIndex: '10',
			left: '100px',
			width:'600px',
			height:'400px',
			top:'300px'
		});
		var arr = [left, center, right];
		arr.push(arr[0]);
		arr.shift();
		left = arr[0];
		center = arr[1];
		right = arr[2];
		right.addEventListener("click", rightaa);
	}
</script>